<script setup lang="ts" name="CCChild1Page_RefsParent">
import { ref } from "vue";

const toy = ref("凹凸慢");
const book = ref("水洗穿");
const money = ref(123);
const house = ref(0);

const changeToy = (t: string) => {
  toy.value = t;
};

const getHouse = (parent: { decrementHouse: () => void }) => {
  try {
    parent.decrementHouse();
    house.value += 1;
  } catch (e) {
    alert((e as Error).message);
  }
};

defineExpose({ changeToy, money });
</script>

<template>
  <div class="bg-orange-100 p-6 my-6">
    <h2 class="text-xl">子组件1</h2>
    <div>玩具：{{ toy }}</div>
    <div>书籍：{{ book }}</div>
    <div>零用：{{ money }}</div>
    <div class="flex gap-x-2">
      <span>房产：{{ house }}</span>
      <button @click="getHouse($parent)" class="border px-1 py-0.5 bg-gray-50">
        抢房子
      </button>
    </div>
  </div>
</template>
